<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,user-scalable=no">
	<title>商品详情规格参数</title>
	<link rel="stylesheet" type="text/css" href="../css/iconfont.css">
	<link rel="stylesheet" type="text/css" href="../css/goods_details_size.css">
	<script type="text/javascript" src="../js/rem2.js"></script>
</head>
<body>
	<div class="wrap">
		<!-- 头部 -->
		<div class="header">
			<label class="header_left"><img src="../img/w_nav_back.png"></label>
			<ul class="nav">
				<li><a href="goods_details.html">商品</a></li>
				<li><a href="goods_details_tuwen.html">详情</a></li>
				<li><a href="goods_details_pingjia.html">评价</a></li>
				<li><a href="javascript:void(0)">推广</a></li>
			</ul>
		</div>
		<!-- 头部 -->
		<div class="content">
			<div class="con_nav">
				<ul>
					<li><a href="goods_details_tuwen.html">图文详情</a></li>
					<li><a href="goods_details_size.html">规格参数</a></li>
					<li><a href="goods_details_baozhuang.html">包装售后</a></li>
					<li><a href="goods_details_fenxiao.html">分销说明</a></li>
				</ul>
			</div>
			<div class="zhuti">
				<div class="zhuti_head">
					<span>主体参数</span>
					<i class="iconfont icon-arrow-up"></i>
				</div>
				<div class="zhuti_item">
					<p><span>品牌:</span><span>Swisse</span></p>
					<p><span>类别:</span><span>保健品</span></p>
					<p><span>产地:</span><span>澳大利亚</span></p>
					<p><span>国家/进口:</span><span>进口</span></p>
					<p><span>适宜人群:</span><span>成年女性</span></p>
					<p><span>保质期:</span><span>3年</span></p>
				</div>
			</div>
			<div class="guige">
				<div class="guige_head">
					<span>规格参数</span>
					<i class="iconfont icon-arrow-up"></i>
				</div>
				<div class="guige_item">
					<p><span>包装:</span><span>瓶装</span></p>
					<p><span>净含量:</span><span>500克</span></p>
				</div>
			</div>
			<div class="other">
				<div class="other_head">
					<span>其他参数</span>
					<i class="iconfont icon-arrow-up"></i>
				</div>
				<div class="other_item">
					<p><span>是否含糖:</span><span>不含糖</span></p>
					<p><span>蓝帽标识:</span><span>普通膳食补充剂(非健字号)</span></p>
				</div>
			</div>
		</div>
		
	</div>
</body>
<script type="text/javascript">
	var zhuti_head = document.querySelector(".zhuti_head");
	var guige_head = document.querySelector(".guige_head");
	var other_head = document.querySelector(".other_head");
	var G = true;
	var Z = true;
	var O = true;
	var header_left = document.querySelector(".header_left");
	header_left.addEventListener("click",function(){
		location.href="supplierShop.html"
	});
	zhuti_head.addEventListener("click",function(){
		var zhuti_item = document.querySelector(".zhuti_item")
		if(Z){
			zhuti_item.style.display="none"
			Z=false
		}else{
			zhuti_item.style.display="block"
			Z=true
		}
		zhuti_head.lastElementChild.classList.toggle("icon-arrow-up")
		zhuti_head.lastElementChild.classList.toggle("icon-arrow")
		// console.log(zhuti_head.lastElementChild.classList)
	})
	guige_head.addEventListener("click",function(){
		var guige_item = document.querySelector(".guige_item")
		if(G){
			guige_item.style.display="none"
			G=false
		}else{
			guige_item.style.display="block"
			G=true
		}
		guige_head.lastElementChild.classList.toggle("icon-arrow-up")
		guige_head.lastElementChild.classList.toggle("icon-arrow")
	})
	other_head.addEventListener("click",function(){
		var other_item = document.querySelector(".other_item")
		if(O){
			other_item.style.display="none"
			O=false
		}else{
			other_item.style.display="block"
			O=true
		}
		other_head.lastElementChild.classList.toggle("icon-arrow-up")
		other_head.lastElementChild.classList.toggle("icon-arrow")
	});
</script>
</html>